<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
    <meta charset="UTF-8">
    <title>TitlssshouseUnitPricee</title>
</head>
<body>
<div id="main" style="width: 100%;height:700px;"></div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({
        url : '/houseUnit/getHouseUnitPriceInfo',
        success : function (data) {
            var option = getOption(data);
            myChart.setOption(option);
        }
    });
    function getOption(data) {
        let maxPriceArray = [];
        let minPriceArray = [];
        let avgPriceArray = [];
        let categoryArray = [];
        for(let i = 0; i < data.length; i++) {
            let dataVal = data[i];
            maxPriceArray.push(dataVal.maxPrice);
            minPriceArray.push(dataVal.minPrice);
            avgPriceArray.push(dataVal.avgPrice);
            categoryArray.push(dataVal.projectName + "-" + dataVal.buildingNumber);
        }
       return {
            title: {
                text: '各个小区房价信息',
                    subtext: '统计信息'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高价', '最低价', '平均价']
            },
            toolbox: {
                show: true,
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                    boundaryGap: false,
                    data: categoryArray
            },
            yAxis: {
                type: 'value',
                    axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [
                {
                    name: '最高价',
                    type: 'line',
                    data: maxPriceArray,
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '最低价',
                    type: 'line',
                    data: minPriceArray
                },
                {
                    name: '平均价',
                    type: 'line',
                    data: avgPriceArray
                }
            ]
        };
    }
</script>
</html>
